<template>
  <div id="messageDetails">
    <div class="topbanner">
      <div class="goback" @click="goback">X</div>
    </div>
    <div class="messagesContent">
      <p class="msgTitle pull-center" v-if="messageDetailData.type === 1">{{ messageDetailData.cNoticeType == '1' ? '系统公告' : '系统更新' }}</p>
      <p class="msgTitle pull-center" v-if="messageDetailData.type === 2">{{ '企业公告' }}</p>
      <p>尊敬的用户：</p>
      <p class="hello">您好！</p>
      <div v-html="messageDetailData.cContent || messageDetailData.content" class="messagesMain"></div>
      <!-- <p class="align-right">{{ messageDetailData.cDate }}</p> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'messageDetails',
  data() {
    return {
      // 系统公告
      messageDetailData: {
        iD: '',
        cNoticesID: '',
        cTitle: '',
        cContent: '',
        cDate: '',
        expireDate: '',
        cType: '',
        cNoticeType: '',
        cRange: '',
        isRead: ''
      }
      // 企业公告
    };
  },
  methods: {
    getItemDetail() {
      this.messageDetailData = JSON.parse(sessionStorage.getItem('itemDetails'));
      if (this.messageDetailData.type === 1) {
        let cdate = this.messageDetailData.cDate;
        let cdateArr = cdate.split('-');
        this.messageDetailData.cDate = cdateArr[0] + '年' + cdateArr[1] + '月' + cdateArr[2].substring(0, 2) + '日';
      }
      if (this.messageDetailData.readCount === 0) {
        this.setRead();
      }
    },
    setRead() { // 设置已读
      let params = {
        noticeid: this.messageDetailData.cNoticesID,
      };
      this.$api.messages.NotificationIKnowOrRead(params).then(res => {
        if (res.data.status == 200) {
          this.getMsgNum();
        }
      });
    },
    getMsgNum() { // 获取未读数量
      this.$api.messages.NotificationGetCount().then(res => {
        if (res.data.status == 200) {
          this.$store.dispatch('GetMsgNum', res.data.data);
        }
      });
    },
    goback() {
      this.$router.go(-1);
    }
  },
  activated() {
    this.getItemDetail();
  }
};
</script>
<style lang="less">
#messageDetails {
  font-size: 16px;
  .topbanner {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .goback {
      text-align: center;
      width: 30px;
      height: 30px;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .messagesContent {
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    > p {
      margin-bottom: 35px;
    }
    .hello {
      padding-left: 40px;
    }
    .messagesMain {
      line-height: 2;
    }
    .msgTitle {
      font-size: 18px;
      margin-bottom: 45px;
    }
  }
}
</style>
